import React, { useState } from 'react';
import { Typography, Table, Card, Space, Button, Tag, Input, Select, Modal, Form, Upload, Progress } from 'antd';
import {
  ContainerOutlined,
  PlusOutlined,
  UploadOutlined,
  DownloadOutlined,
  DeleteOutlined,
  SearchOutlined,
  InboxOutlined
} from '@ant-design/icons';
import type { ColumnsType } from 'antd/es/table';

const { Title, Text } = Typography;
const { Option } = Select;
const { Dragger } = Upload;

interface ContainerImage {
  id: string;
  name: string;
  tag: string;
  size: string;
  created: string;
  pulls: number;
  status: 'available' | 'building' | 'failed';
  visibility: 'public' | 'private';
}

const ContainerImages: React.FC = () => {
  const [searchText, setSearchText] = useState('');
  const [statusFilter, setStatusFilter] = useState<string>('all');
  const [uploadModalVisible, setUploadModalVisible] = useState(false);
  const [form] = Form.useForm();

  // 模拟镜像数据
  const [images] = useState<ContainerImage[]>([
    {
      id: '1',
      name: 'nginx',
      tag: 'latest',
      size: '133 MB',
      created: '2024-01-15',
      pulls: 2500,
      status: 'available',
      visibility: 'public'
    },
    {
      id: '2',
      name: 'node',
      tag: '16-alpine',
      size: '45 MB',
      created: '2024-01-14',
      pulls: 1200,
      status: 'available',
      visibility: 'public'
    },
    {
      id: '3',
      name: 'my-app',
      tag: 'v1.0.0',
      size: '256 MB',
      created: '2024-01-13',
      pulls: 50,
      status: 'building',
      visibility: 'private'
    }
  ]);

  const getStatusConfig = (status: ContainerImage['status']) => {
    const configs = {
      available: { color: 'success', text: '可用' },
      building: { color: 'processing', text: '构建中' },
      failed: { color: 'error', text: '构建失败' }
    };
    return configs[status];
  };

  const filteredImages = images.filter(image => {
    const matchesSearch = image.name.toLowerCase().includes(searchText.toLowerCase()) ||
                         image.tag.toLowerCase().includes(searchText.toLowerCase());
    const matchesStatus = statusFilter === 'all' || image.status === statusFilter;
    return matchesSearch && matchesStatus;
  });

  const columns: ColumnsType<ContainerImage> = [
    {
      title: '镜像信息',
      key: 'imageInfo',
      render: (_, record) => (
        <Space direction="vertical" size="small">
          <Space>
            <ContainerOutlined style={{ color: '#722ed1' }} />
            <Text strong>{record.name}</Text>
            <Tag color="blue">{record.tag}</Tag>
          </Space>
          <Text type="secondary" style={{ fontSize: 12 }}>
            大小: {record.size}
          </Text>
        </Space>
      ),
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      render: (status: ContainerImage['status']) => {
        const config = getStatusConfig(status);
        return <Tag color={config.color}>{config.text}</Tag>;
      },
    },
    {
      title: '可见性',
      dataIndex: 'visibility',
      key: 'visibility',
      render: (visibility: ContainerImage['visibility']) => (
        <Tag color={visibility === 'public' ? 'green' : 'orange'}>
          {visibility === 'public' ? '公开' : '私有'}
        </Tag>
      ),
    },
    {
      title: '创建时间',
      dataIndex: 'created',
      key: 'created',
    },
    {
      title: '操作',
      key: 'action',
      width: 150,
      render: (_, record) => (
        <Space size="small">
          <Button
            type="link"
            size="small"
            icon={<DownloadOutlined />}
            disabled={record.status !== 'available'}
          >
            拉取
          </Button>
          <Button
            type="link"
            size="small"
            danger
            icon={<DeleteOutlined />}
          >
            删除
          </Button>
        </Space>
      ),
    },
  ];

  return (
    <div style={{ padding: '24px' }}>
      <div style={{ 
        display: 'flex', 
        justifyContent: 'space-between', 
        alignItems: 'flex-start',
        marginBottom: '24px'
      }}>
        <div>
          <Title level={2} style={{ margin: 0, marginBottom: '8px' }}>
            <ContainerOutlined style={{ marginRight: '8px', color: '#722ed1' }} />
            镜像仓库
          </Title>
          <Text type="secondary">管理Docker镜像的存储、分发和版本控制</Text>
        </div>
        <Button 
          type="primary" 
          size="large"
          icon={<PlusOutlined />}
          onClick={() => setUploadModalVisible(true)}
        >
          上传镜像
        </Button>
      </div>

      {/* 搜索和筛选 */}
      <Card style={{ marginBottom: '16px' }}>
        <Space style={{ marginBottom: '16px' }}>
          <Input
            placeholder="搜索镜像名称或标签"
            prefix={<SearchOutlined />}
            value={searchText}
            onChange={(e) => setSearchText(e.target.value)}
            style={{ width: 300 }}
          />
          <Select
            placeholder="选择状态"
            value={statusFilter}
            onChange={setStatusFilter}
            style={{ width: 150 }}
          >
            <Option value="all">全部状态</Option>
            <Option value="available">可用</Option>
            <Option value="building">构建中</Option>
            <Option value="failed">构建失败</Option>
          </Select>
        </Space>

        <Table
          columns={columns}
          dataSource={filteredImages}
          rowKey="id"
          pagination={{
            total: filteredImages.length,
            pageSize: 10,
            showSizeChanger: true,
            showQuickJumper: true,
            showTotal: (total, range) => `第 ${range[0]}-${range[1]} 条，共 ${total} 条`,
          }}
        />
      </Card>

      {/* 上传镜像模态框 */}
      <Modal
        title="上传镜像"
        open={uploadModalVisible}
        onCancel={() => setUploadModalVisible(false)}
        onOk={() => {
          form.validateFields().then(() => {
            setUploadModalVisible(false);
            form.resetFields();
          });
        }}
      >
        <Form form={form} layout="vertical">
          <Form.Item name="name" label="镜像名称">
            <Input placeholder="例如：my-app" />
          </Form.Item>
          <Form.Item name="tag" label="标签">
            <Input placeholder="例如：latest" />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
};

export default ContainerImages; 